<template>
	<view class="page">
		<view class="contentbox">
			<view class="flex row-between title">
				<view @click="tabs(1)" class="font" :class="{ aclass: active == 1 }">登录</view>
				<view @click="tabs(2)" class="font" :class="{ aclass: active == 2 }">注册</view>
			</view>
			<view class="boxes">
				<u--input v-model="phone" type="number" placeholder="请输入手机号" prefixIcon="phone-fill" prefixIconStyle="font-size: 22px;color: #55A5F0"></u--input>
				<u--input v-model="pwd" type="password" placeholder="请输入密码" prefixIcon="lock-opened-fill" prefixIconStyle="font-size: 22px;color: #55A5F0"></u--input>
				<u--input v-if="active==2" v-model="phone2" type="number" placeholder="请输入推荐人手机号" prefixIcon="phone-fill" prefixIconStyle="font-size: 22px;color: #55A5F0"></u--input>
				
				<view @click="submit" class="other-button m-l-50 m-r-50" hover-class="other-button-hover">{{active==1?'登录':'提交'}}</view>
			</view>
		</view>
	</view>
</template>

<script>
import {getCode} from '@/utils/login'
const app = getApp();
export default {
	data() {
		return {
			active: 1,
			phone:'',
			pwd:'',
			phone2:'',
			openid:''
		};
	},
	async onLoad() {
		if(uni.getStorageSync('myphone')){
			this.phone = uni.getStorageSync('myphone');
		}
		if(uni.getStorageSync('mypwd')){
			this.pwd = uni.getStorageSync('mypwd');
		}
		const code = await getCode();
		// console.log(code)
		await this.getOpenid(code)
	},
	methods: {
		tabs(num) {
			this.active = num;
		},
		async getOpenid(code){
			let res = await this.$api.getOpenid({code:code});
			if (res.code == 1) {
				this.openid = res.data.openid;
			}
		},
		async submit(){
			if(!/^1[3456789]\d{9}$/.test(this.phone)) {
				this.$toast({
					title: '手机号格式不正确!'
				})
				return
			}
			if(this.active == 1){
				let res = await this.$api.account({
					terminal:6,
					scene:1,
					account:this.phone,
					password:this.pwd
				});
				if (res.code == 1) {
					uni.setStorageSync('myphone',this.phone)
					uni.setStorageSync('mypwd',this.pwd)
					uni.setStorageSync('token',res.data.token);
					uni.reLaunch({
						url:'/pages/main/main'
					})
				}
			}else{
				if(this.phone2){
					if(!/^1[3456789]\d{9}$/.test(this.phone2)) {
						this.$toast({
							title: '手机号格式不正确!'
						})
						return
					}
				}
				let res = await this.$api.register({
					channel:6,
					inviter:this.phone2,
					account:this.phone,
					password:this.pwd,
					password_confirm:this.pwd,
					openid:this.openid
				});
				if (res.code == 1) {
					uni.setStorageSync('myphone',this.phone)
					uni.setStorageSync('mypwd',this.pwd)
					this.active = 1;
					this.$toast({
						title: '请点击登录!'
					})
				}
			}
			
		}
	}
};
</script>

<style lang="scss">
.page {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background-image: url(../../static/login/bk.jpg);
	background-size: 100% 100%;
	overflow: hidden;
}
.contentbox {
	flex: 1;
	overflow: hidden;
	padding: 0 25rpx;

	.title {
		margin: 150rpx 70rpx 0 70rpx;
		color: #fff;
		text-align: center;
		.font {
			font-size: 36rpx;
		}
		.aclass {
			font-size: 48rpx;
			border-bottom: 5rpx solid #fff;
			padding-bottom: 15rpx;
		}
	}

	.boxes {
		box-sizing: border-box;
		background: #fff;
		border: 1px solid #b6cff2;
		border-radius: 10rpx;
		width: 700rpx;
		height: 600rpx;
		margin-top: 50rpx;
		padding: 50rpx;
		
		/deep/ .u-border{
			margin-bottom: 50rpx;
		}
	}
}
</style>
